@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

:root{
     --bleu-gris-clr: rgb(149, 183, 198);/*#95b7c6*/
    --bleu-gris-dark:rgb(85, 118, 128);/*#557680*/
    --violet:rgb(140, 13, 91);/*#8c0d5b*/
    --grey:rgb(189,189,191); /*#8b8b8b;*/
    --darkgrey:#8b8b8b; /*#bdbdbf;*/
    --overlay-menu-clr:hsla(0, 0%, 100%, 0.872);
    --font9:0.563rem;
    --font11:0.688rem;
    --font13:0.813rem;
    --font14:0.875rem;
    --font15:0.938rem;
    --font16:1rem;
    --font18:1.125rem;
    --font20:1.25rem;
    --font25:1.563rem;
    --font28:1.75rem;
    --font32:2rem;
    --font34:2.125rem;
    --font48:3rem;
    --font80:5rem;
}

.panel{
    margin-left: 0;
	width:100%;
    font-family: "Rubik", sans-serif;
    line-height: 1.3em;
    margin-bottom: 10px;
    background-color: #e7e7e7;
    }    

.panel-title{
    position: relative;
    padding: 15px;
    margin: 0;
    border: 1px solid #A3A599;
    border-radius: .30rem;
    cursor: pointer;
    font-size: var(--font18);
    line-height: 20px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--bleu-gris-dark); 
}
    
.panel-content{
    display:none;
    padding: 10px 10px;
    overflow: hidden; 
    font-size: 100%;
    -o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
 }

.panel p{
    color:rgb(33, 33, 33);
    font-family: "Rubik", sans-serif;
    font-size: var(--font16);
    line-height: 1.4em;
    font-weight: 300;
}

.panel a{
    color: var(--violet);
    text-decoration: underline;
    text-underline-offset: 1px;
    font-weight: 400;
}

.panel a:hover{
    color: var(--bleu-gris-dark);
    transition: ease-in-out .3s;
}

.panel-title img{
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 20px;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.2s ease-in-out;
    -o-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}

.panel-title img.down{ 
    -webkit-transform: translateY(-50%) rotateZ(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotateZ(180deg);
    opacity:0.5;
}

.tarifs{
        margin:0 1rem;
        font-size: var(--font16);
        font-weight: 300;
        font-family:  "Rubik", sans-serif;
    }
/*///////// MEDIA SCREEN /////////////*/
@media only screen and (max-width: 601px) {

    .panel{
	width:95%;

    }

    .panel-title{
    line-height:1.3rem;
    font-size: var(--font16);
    }

    .panel p{
        font-size: var(--font15);
        line-height: 1.3em;
        font-size: var(--font13);
        font-weight: 300;
    }

    .tarifs{
        margin:0.5rem 1rem;
        font-size: var(--font14);
        font-weight: 300;
    }

}